<template>
  <div id="VehicleDetails" class="whiteBg">
    <h2 class="blueTitle">
      <p>车辆详情</p>
    </h2>
    <div class="info">
      <Row>
        <Col :xs="8" :sm="8" :md="8" :lg="8" :xl="8" class="item">
          <span>排量</span>
          <p>{{displacement}}</p>
        </Col>
        <Col :xs="8" :sm="8" :md="8" :lg="8" :xl="8" class="item">
          <span>表显里程</span>
          <p>{{(mileage/10000).toFixed(2)}}万</p>
        </Col>
        <Col :xs="8" :sm="8" :md="8" :lg="8" :xl="8" class="item">
          <span>车辆类型</span>
          <p>{{vehicleType}}</p>
        </Col>
        <Col :xs="8" :sm="8" :md="8" :lg="8" :xl="8" class="item">
          <span>排放等级</span>
          <p>{{dischargeLevelWord}}</p>
        </Col>
        <Col :xs="8" :sm="8" :md="8" :lg="8" :xl="8" class="item">
          <span>燃油类型</span>
          <p>{{fuelType}}</p>
        </Col>
        <Col :xs="8" :sm="8" :md="8" :lg="8" :xl="8" class="item">
          <span>车身颜色</span>
          <p>{{color}}</p>
        </Col>
        <Col :xs="8" :sm="8" :md="8" :lg="8" :xl="8" class="item">
          <span>生产厂商</span>
          <p>{{manufacturerName}}</p>
        </Col>
        <Col :xs="8" :sm="8" :md="8" :lg="8" :xl="8" class="item">
          <span>变速箱</span>
          <p>{{transmission}}</p>
        </Col>
        <Col :xs="8" :sm="8" :md="8" :lg="8" :xl="8" class="item">
          <span>交强险到期</span>
          <p>{{insuranceTime}}</p>
        </Col>
      </Row>
    </div>
  </div>
</template>
<script>
import { Row, Col } from "element-ui";
export default {
  data() {
    return {};
  },
  props: {
    displacement:String,
    mileage:Number,
    fuelType:String,
    color:String,
    insuranceTime:String,
    dischargeLevelWord:String,
    vehicleType:String,
    manufacturerName:String,
    transmission:String
  },
  components: {
    Row,
    Col
  }
};
</script>
<style lang='scss'>
#VehicleDetails {
  margin-top: 15px;
  .info {
    padding: 0 15px;
    .item {
      border-top: 1px solid #f8f8f8;
      border-right: 1px solid #f8f8f8;
      height: 70px;
      justify-content: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      span {
        color: #999;
      }
      p {
        color: #323232;
        font-size: 1.166667rem;
      }
    }
    .item:nth-child(3n) {
      border-right: 0;
    }
    .item:nth-child(7),
    .item:nth-child(8),
    .item:nth-child(9) {
      border-bottom: 1px solid #f8f8f8;
    }
    .item:nth-child(1),
    .item:nth-child(2),
    .item:nth-child(3) {
      border-top: 0px solid #f8f8f8;
    }
  }
}
</style>

